<template>
    <li v-for="item in commentStore.comments" :key="item.id">
        <span>{{ item.content }}</span>
        <span class="del" @click="del(item.id)">删除</span>
    </li>
</template>

<script setup>
import useCommentStore from '../store/module/comment'
import { ElMessage, ElMessageBox } from 'element-plus'
const commentStore = useCommentStore()

const del = (id) => {
    // 弹框确认
    ElMessageBox.confirm(
        '确认删除吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            console.log('ok')
            commentStore.del(id)
        }).catch(() => { })


}
</script>

<style>
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    list-style-type: none;
    border-bottom: 1px solid #333;
}

li .del {
    color: blue;
    cursor: pointer;
}
</style>